<template>
  <div id="detail">
    <!--详情页导航-->
    <DetailNavBar
      class="detail-nav-bar"
      @titleClick="titleClick"
      ref="detailNavBar"
      :isClick="isClick"
    />
    <Scroll
      class="content"
      ref="scroll"
      pullUpLoad
      :probeType="3"
      @scrollOn="scrollOn"
    >
      <!--轮播-->
      <DetailSwiper :topImages="topImages" />
      <!--商品概括-->
      <DetailBaseInfo :goods="goods" />
      <!--店铺详情-->
      <DetailShopInfo :shop="shop" />
      <!--商品详情-->
      <DetailGoodsInfo
        :detail-info="detailInfo"
        @goodsImageLoadFinish="goodsImageLoadFinish"
      />
      <!--商品参数-->
      <DetailParamInfo ref="paramInfo" :paramInfo="paramInfo" />
      <!--评论信息-->
      <DetailCommentInfo ref="commentInfo" :commentInfo="commentInfo" />
      <!--推荐数据-->
      <GoodsList ref="recommends" :goods="recommends" />
    </Scroll>
    <!-- 购物车 -->
    <DetailBottomBar @click.native="addToCart" />
    <!-- 返回顶部 -->
    <BackTop class="BackTop" @click.native="backTop" v-show="isBackTop" />
    <!-- 消息提示 -->
    <div class="message" :style="{ display: isAdd ? 'block' : 'none' }">
      已添加到购物车
    </div>
  </div>
</template>

<script>
import { getDetail, getRecommend, Goods, Shop, GoodsParams } from "api/detail";

import DetailNavBar from "./childComps/DetailNavBar";
import DetailSwiper from "./childComps/DetailSwiper";
import DetailBaseInfo from "./childComps/DetailBaseInfo";
import DetailShopInfo from "./childComps/DetailShopInfo";
import DetailGoodsInfo from "./childComps/DetailGoodsInfo";
import DetailParamInfo from "./childComps/DetailParamInfo";
import DetailCommentInfo from "./childComps/DetailCommentInfo";
import DetailBottomBar from "./childComps/DetailBottomBar";

import Scroll from "components/common/scroll/Scroll";
import GoodsList from "components/content/goods/GoodsList";
// import BackTop from "components/common/backTop/BackTop";

import { backTopMinin } from "common/mixin";

export default {
  name: "detail",
  data() {
    return {
      id: "",
      topImages: [],
      goods: {},
      shop: {},
      detailInfo: {},
      paramInfo: {},
      commentInfo: {},
      recommends: [],
      themeTopYs: [0, 0, 0, 0],
      isClick: true,
      isAdd: false,
    };
  },
  components: {
    DetailNavBar,
    DetailSwiper,
    DetailBaseInfo,
    DetailShopInfo,
    DetailGoodsInfo,
    DetailParamInfo,
    DetailCommentInfo,
    DetailBottomBar,
    Scroll,
    GoodsList,
  },
  mixins: [backTopMinin],
  created() {
    // this.id = this.$route.params.id;
    this.id = this.$route.query.id;
    (async () => {
      await this.getDetail();
      await this.getRecommend();
    })().then(() => {
      this.$nextTick(() => {
        // // scroll刷新（防网速慢）
        this.$refs.scroll.scroll.refresh();
        // tab栏跳转距离
        this.themeTopYs[1] = this.$refs.paramInfo.$el.offsetTop;
        this.themeTopYs[2] = this.$refs.commentInfo.$el.offsetTop;
        this.themeTopYs[3] = this.$refs.recommends.$el.offsetTop;
        console.log(this.themeTopYs);
      });
    });
  },
  updated() {
    console.log("updated");
  },
  destroyed() {
    this.$bus.$off("goodsImageFinsh");
  },
  methods: {
    async getDetail() {
      await getDetail(this.id).then((res) => {
        const data = res.result;
        // console.log("data", data);
        // 获取顶部轮播数据
        this.topImages = data.itemInfo.topImages;
        // 获取商品信息
        this.goods = new Goods(
          data.itemInfo,
          data.columns,
          data.shopInfo.services
        );
        // 获取店铺信息
        this.shop = new Shop(data.shopInfo);
        // 获取商品详细信息
        this.detailInfo = data.detailInfo;
        // 获取商品参数信息
        this.paramInfo = new GoodsParams(
          data.itemParams.info,
          data.itemParams.rule
        );
        // 取出评论信息
        if (data.rate.cRate !== 0) {
          this.commentInfo = data.rate.list[0];
        }
      });
    },
    async getRecommend() {
      await getRecommend().then((res) => {
        this.recommends = res.data.list;
      });
    },
    titleClick(index) {
      // 图片加载完再点击
      if (!this.isClick) return;
      // // scroll刷新（防网速慢）
      this.$refs.scroll.scroll.refresh();
      // // 初始计算不一定高度不一定正确，所以点击时要重新计算（防网速慢）
      this.themeTopYs[1] = this.$refs.paramInfo.$el.offsetTop;
      this.themeTopYs[2] = this.$refs.commentInfo.$el.offsetTop;
      this.themeTopYs[3] = this.$refs.recommends.$el.offsetTop;
      console.log(this.themeTopYs);
      this.$refs.scroll.scrollTo(0, -this.themeTopYs[index], 100);
    },
    // 监听scroll滚动（子组件事件）
    scrollOn(res) {
      setTimeout(() => {
        this.$refs.scroll.scroll.refresh();
        // // 初始计算不一定高度不一定正确，所以点击时要重新计算（防网速慢）
        this.themeTopYs[1] = this.$refs.paramInfo.$el.offsetTop;
        this.themeTopYs[2] = this.$refs.commentInfo.$el.offsetTop;
        this.themeTopYs[3] = this.$refs.recommends.$el.offsetTop;
      }, 2000);
      if (res - 50 < -this.themeTopYs[3]) {
        this.$refs.detailNavBar.currentIndex = 3;
      } else if (res - 50 < -this.themeTopYs[2]) {
        this.$refs.detailNavBar.currentIndex = 2;
      } else if (res - 50 < -this.themeTopYs[1]) {
        this.$refs.detailNavBar.currentIndex = 1;
      } else {
        this.$refs.detailNavBar.currentIndex = 0;
      }
      // 判断backTop是否显示
      this.isBackTop = res < -2000;
      console.log(this.isBackTop);
    },
    goodsImageLoadFinish() {
      this.isClick = true;
    },
    // 加入购物车
    addToCart() {
      // 创建需要的数据
      const product = {};
      product.image = this.topImages[0];
      product.title = this.goods.title;
      product.desc = this.goods.desc;
      product.price = this.goods.realPrice;
      product.iid = this.id;
      product.checkd = true;
      // 加入购物车
      // this.$store.commit("addCart", product);
      if (
        product.image != undefined &&
        product.title != undefined &&
        product.desc != undefined &&
        product.price != undefined &&
        product.iid != undefined
      ) {
        this.$store.dispatch("addCart", product);
        this.isAdd = true;
        setTimeout(() => {
          this.isAdd = false;
        }, 800);
      }
    },
  },
};
</script>

<style lang='less' scoped>
.detail-nav-bar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
  background-color: #fff;
}
#detail {
  position: relative;
  background-color: #fff;
  z-index: 2;
}
.content {
  margin-top: 44px;
  height: calc(100vh - 44px - 58px);
  overflow: hidden;
}
.BackTop {
  position: fixed;
  right: 5px;
  bottom: 55px;
}
.message {
  position: absolute;
  left: 50%;
  top: 50%;
  padding: 10px;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.8);
  font-size: 18px;
  color: white;
}
</style>
